<template>
  <div class="login-container " style="background-color: #0a2049;">
    <div class="login-header">
      <div class="login-header-title">
        <img src="@/assets/imgs/login-header-logo.png" alt="logo">
        <div :class="language === 'zh' ? 'login-header-title-zh' : 'login-header-title-en'">
          {{ t('login.title') }}
        </div>
      </div>
    </div>
    <div class="login-content animate__animated  animate__slideInDown">
      <div class="login-content-form">
        <div class="flex items-center justify-between">
          <img src="@/assets/imgs/login-left-photoelectricity.png" alt="">
          <div class="w-100% login-content-title text-center">{{ loginTitle }}</div>
          <img src="@/assets/imgs/login-right-photoelectricity.png" alt="">
        </div>
        <el-form ref="loginFormRef" :model="loginFormData" :rules="loginFormRules">
          <el-form-item prop="username">
            <el-input :placeholder="t('login.username')" v-model="loginFormData.username">
              <template #prefix>
                <img src="@/assets/imgs/login-user.png" alt="">
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input 
            :placeholder="t('login.password')" 
            v-model="loginFormData.password" 
            ref="passwordInputRef" 
            :type="loginFormData.type === 'show' ? 'text' : 'password'"
            >
              <template #prefix>
                <img src="@/assets/imgs/login-password.png" alt="">
              </template>
              <template #suffix>
                <img src="@/assets/imgs/show-password.png" alt="" class="cursor-pointer" v-if="loginFormData.type === 'show'" @click="togglePasswordVisibility($event, 'hide')">
                <img src="@/assets/imgs/hide-password.png" alt="" class="cursor-pointer" v-else @click="togglePasswordVisibility($event, 'show')">
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <div class="w-full  text-center global_btn" style="width: 100%;height: 30px;" v-globalLoading="{ handler: handleLogin, text: '登录中...' }">
              {{ t('login.login') }}
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="position-absolute right-4% top-2%">
      <ControlLange :isHome="false" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { storeToRefs } from 'pinia'
export default defineComponent({
  name: 'login',
})
</script>
<script setup  lang="ts">
import { useUserInfoStore } from '@/stores/userInfo'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useSettingStore } from '@/stores/setting'
const { t } = useI18n()
const router = useRouter()
const userInfoStore = useUserInfoStore()
const settingStore = useSettingStore()
const {language} = storeToRefs(settingStore)
const isDev = import.meta.env.MODE === "development"
const loginFormData = ref<any>({
   username: isDev ? 'admin' : '',
   password: isDev ? '88888888' : '', 
   type:"show"
})
const loginFormRef = ref<any>(null)
const loginFormRules = computed<any>(()=>({
  username: [
    { required: true, message: t('login.username'), trigger: 'blur' }],
  password: [
    { required: true, message: t('login.password'), trigger: 'blur' }],
  })
)
const loginTitle = computed(()=>{
  return language.value === 'zh' ? '用户登录' : 'User Login'
})
const handleLogin =async () => {
  try{
    await loginFormRef.value.validate()
    await userInfoStore.login(loginFormData.value)
          await userInfoStore.getDeviceInfo()
          await userInfoStore.getBasebandInfo()
    router.push({
      path:"/"
    })
  }catch(error){}
}
   
const passwordInputRef = ref<any>(null)
function togglePasswordVisibility(event:any, type:any) {
  if(!passwordInputRef.value) return;
  const inputEl = passwordInputRef.value.$el.querySelector('input');
  const cursorPosition = inputEl.selectionStart;
  loginFormData.value.type = type;
  setTimeout(() => {
    inputEl.focus();
    inputEl.setSelectionRange(cursorPosition, cursorPosition);
  }, 10);
}
watch(language,(newVal)=>{
  console.log(newVal)
})
</script>

<style  lang="scss" scoped>
*{
  box-sizing: border-box;
}
.login-container{
  width: 100%;
  height: 100%;
  background-image: url('@/assets/imgs/login-bg.png');
  background-size: cover;
  position: relative;
  .login-header{
    width: 100%;
    position: relative;
    background-image: url('@/assets/imgs/login-header.png');
    background-size: 100% 100%;
    height:140px;
    .login-header-title{
      font-size: 37px;
      color: #fff;
      display: flex;
      height: 32px;
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translate(-50%);
      font-family: YouSheBiaoTiHei;
    }
    .login-header-title-zh{
      font-size: 30px;
    }
    .login-header-title-en{
      font-size: 30px;
    }
   
  }
  .login-content{
    position: absolute;
    top:40%;
    right: 10%;
    // transform: translate(-50%,-90%);
    width: 450px;
    height: 315px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-image: url('@/assets/imgs/login-content.png');
    .login-content-form{
      width: 80%;
      display: flex;
      flex-direction: column; 
      gap: 20px;
      .login-content-title {
          color: #ffffff;
          font-family: YouSheBiaoTiHei;
          font-size: 24px;
          color: #FFFFFF;
          line-height: 24px;
          text-shadow: 0px 7px 20px rgba(25, 15, 171, 0.5);
          text-align: center;
          font-style: normal;
        }

      :deep(.el-input__wrapper){
        border-radius: 4px;
        height: 46px;
        background-color: rgba(3, 50, 135, .5) !important;
        box-shadow: none; //去除本身边框
 
      }
      :deep(.el-input__inner){
        color: #00ACFF;
        &::placeholder{
          color: #5182AF;
        }
      }
      svg{
        width: 16px;
        height: 16px;
      }
      .login-form-btn{
        height: 48px;
        font-weight: 400;
font-size: 24px;
color: #4e90ce;
        background-image: url('@/assets/imgs/login-btn.png');
        background-size: 100% 100%;
        cursor: pointer;
        line-height: 48px;
      }
    }
    .login-content-bg{
      width: 85%;
    }
  }
}
</style>
